<template>
    <div>
        <div class="container">    
            <div class="tableContent">
                <el-form
                    style="border-left: 1px solid #ecedef;border-right: 1px solid #ecedef;border-top: 1px solid #ecedef;border-bottom: 1px solid #ecedef">
                    <el-row style="height: 15px"/>
                    <el-row style="height: 40px;padding-left: 15px">
                        <el-form-item label="策略配置方案:" class="label-bolder">
                            <el-select v-model="selectedValue" placeholder="Select" style="width: 240px" :props="{ expandTrigger: 'hover' }"
                                         @change="handleChangeDetail" filterable
                                         clearable>
                                <el-option-group
                                v-for="group in strategyNameOptions"
                                :key="group.label"
                                :label="group.label"
                                >
                                <el-option
                                    v-for="item in group.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                    </el-row>
                    <el-row style="height: 15px"/>
                    <TableComponent v-loading="isLoading" element-loading-text="加载中..." :assetList="strategyList"
                                    :tableColumns="tableColumns">
                        <template #priority="{row}">
                            <span>{{ row.priority }}</span>
                        </template>

                        <template #status="{row}">
                            <span v-if="row.status===0">暂停</span>
                            <span v-if="row.status===1">启用</span>
                        </template>
                    </TableComponent>
                    <el-pagination style="margin-top: 20px;float:right" background layout="total, prev, pager, next"
                                   :total="requireData.total"
                                   :currentPage="requireData.current" :page-size="requireData.size"
                                   @current-change="handlePageChange">
                    </el-pagination>
                </el-form>
            </div>
            <el-tabs
                v-model="activeTabName"
                type="card"
                class="trigger-configuration-tabs"
            >
                <el-tab-pane label="页面参数配置" name="first">
                    <CollectionConfigCheckBox @checkChangeFn="checkChangeFn"/>
                </el-tab-pane>
                <el-tab-pane label="CDN配置" name="second">
                    <CdnConfiguration :requireData="requireData" @checkCDNConfig="checkCDNConfig"></CdnConfiguration>
                </el-tab-pane>
            </el-tabs>
            

            <div class="advancedConfigurationContent">
                <AdvancedConfiguration :advancedReqData="advancedReqData" :selectedStrategy="selectedStrategy" :hasTriggerFlag="hasTriggerFlag"/>
            </div>
        </div>

    </div>

</template>

<script setup>
import CollectionConfigCheckBox from "./components/CollectionConfigCheckBox.vue";
import CdnConfiguration from "./components/CdnConfiguration.vue";
import TableComponent from '@/components/TableComponent.vue';
import {tableColumns} from "@/constant/collectionStrategyConfig.js";
import {getAllStrategy, getStrategyListByCondition} from "@/api/strategy.js";
import {getAllStrategyGroup} from "@/api/strategyGroup.js";
import {onMounted, reactive, ref, toRaw, toRefs, watch} from "vue";
import AdvancedConfiguration from "./components/AdvancedConfiguration.vue";

const strategyNameOptions = ref([]);
const strategyList = ref([]);
const requireData = reactive({
    current: 1,
    size: 10,
    strategyIds: [],
    groupIds: [],
    total: 0,
    triggerCdnConfig: []  // cdn 配置
})
const selectedValue = ref('')
const strategyObj = reactive({})
const advancedReqData = ref({
    collectTimeBefore: 8,
    collectTimeAfter: 6,
    cycle: 'day',
    triggerCount: 1
});
const activeTabName = ref('first')
const isLoading = ref(false);
const hasTriggerFlag = ref(false)

watch(selectedValue,(newVal) => {
    return hasTriggerFlag.value = newVal !== '' ? true : false
})
const getAllStrategyFn = () => {
    getAllStrategy({}).then((res) => {
        let response = res.data.data;
        if (response) {
            strategyNameOptions.value = [];
            let triggerObj = {
                    label: 'Trigger',
                    options: []
            }
            
            response.forEach((element) => {
                let tmp = {
                    value: element.id,
                    label: `${element.id}-${element.strategyName}`,
                }
                triggerObj.options.push(tmp)
                strategyObj[element.id] = {
                    type: 'strategyIds'
                }

            });
            strategyNameOptions.value.push(triggerObj);
            let triggerGroupObj = {
                    label: '策略组',
                    options: []
            }
            
            getAllStrategyGroup({}).then((res) => {
                let response = res.data.data;
                if (response) {
                    response.forEach((ele) => {
                        let tmp = {
                            value: ele.id,
                            label: ele.groupName,
                        }
                        triggerGroupObj.options.push(tmp)
                        strategyObj[ele.id] = {
                            type: 'groupIds'
                        }
                    })
                } else {
                }
            });
            strategyNameOptions.value.push(triggerGroupObj);
        } else {
            strategyNameOptions.value = [];
        }
    })
}
const getStrategyListByConditionFn = () => {
    isLoading.value = true;
    getStrategyListByCondition({
        ...requireData
    }).then((res) => {
        if (res.data.code === 200) {
            let response = res.data.data;
            strategyList.value = response.records;
            requireData.total = response.total;
            isLoading.value = false;
        }
    })

}

const selectedStrategy = reactive({
    groupIds: [],
    strategyIds: []
});
const handleChangeDetail = (val, aa) => {
    selectedValue.value = val
    requireData.groupIds = [];
    requireData.strategyIds = [];
    if (strategyObj[val].type === 'strategyIds') {
        requireData.strategyIds = [val];
    } else {
        requireData.groupIds = [val];
    }
    selectedStrategy.groupIds = requireData.groupIds;
    selectedStrategy.strategyIds = requireData.strategyIds;
    getStrategyListByConditionFn();
}
const handlePageChange = (val) => {
    requireData.current = val;
    getStrategyListByConditionFn();
}


const checkChangeFn = (val) => {
    advancedReqData.value = toRaw(val)
}
const checkCDNConfig = (val) => {
    advancedReqData.value.triggerCdnConfig = toRaw(val)
}


onMounted(() => {
    getAllStrategyFn()

})


</script>

<style lang="less" scoped>
.container {

    .tableContent {
        margin-top: 20px;
        padding: 10px;
        border: 1px solid #ccc;
    }
}

.advancedConfigurationContent {
    margin-top: 20px;
}
.trigger-configuration-tabs{
    margin-top: 50px;
}
</style>
